<!-- 使用说明：
	1.showPop:弹窗显隐控制，
	2.complainList:举报理由选项，格式参考数组默认值，必传
	3.infoDetail:接口的核心参数，内容参考默认值，必传
	注意：这里面有个phoneAreaData，需要父组件按需调用
	使用：<complain :showPop="AAA" :infoDetail="BBB" @hideFn="AAA=false" :complainList="CCC" ref="complaint"></complain>
	实例参考：article/detail/index
 -->
<template>
	<view class="complain" v-if="complainb" @click="popFn(0)">
		<view class="c-content" :style="`transform:translateY(${complainConb?'0%':'100%'})`" @click.stop>
			<!-- 标题 -->
			<view class="cc-title">
				<text>举报内容</text>
				<image :src="`${imgPath}/close_2.png?v=${imgVersion}`" mode="aspectFit" @click="popFn(0)"></image>
			</view>
			<!-- 选项 -->
			<view class="cc-list">
				<view class="title">选择举报理由</view>
				<view class="list">
					<view :class="['item',{'active':activeIndex==index}]" v-for="(item,index) in complainList"
						:key="index" @click="activeIndex=index">{{item}}</view>
				</view>
			</view>
			<!-- 联系方式 -->
			<view class="cc-phone">
				<view class="title">联系方式</view>
				<view class="phone">
					<view class="select" @click="secPopFn(1)">
						<text>+{{areaCode}}</text>
						<image :src="`${imgPath}/d_arr.png?v=${imgVersion}`" mode="aspectFit"></image>
					</view>
					<input type="tel" placeholder="输入手机号" placeholder-style="opacity:.3;font-wei:500" v-model="phone">
				</view>
			</view>
			<!-- 举报描述 -->
			<view class="cc-description">
				<view class="title">举报描述</view>
				<view class="input">
					<textarea placeholder="可简述理由，以便快速处理举报" placeholder-style="opacity:.3" maxlength="100" auto-height
						v-model="description"></textarea>
					<view class="number">{{description.length}}/100</view>
				</view>
			</view>
			<!-- 提交按钮 -->
			<view class="cc-btn"
				:style="`background:${phone?'linear-gradient(-90deg, #F6252F 0%, #FF4621 100%);':'#FFBABA'}`"
				@click="submitFn">提交</view>
		</view>
		<!-- 手机号弹窗 -->
		<view class="c-pop" v-if="phoneb" @click.stop="secPopFn(0)">
			<view class="cp-content" :style="`transform:translateY(${phoneConb?'0%':'100%'})`" @click.stop>
				<view class="title">
					<view class="back" @click="secPopFn(0)">返回</view>
					<text>选择地区</text>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in phoneArea" :key="index"
						@click="areaCode=item.code;secPopFn(0)">
						<view class="area">{{item.name}}</view>
						<view class="num">+{{item.code}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗提示 -->
		<popWarn :info="info" :warningb="warningb" @click.stop></popWarn>
	</view>
</template>

<script>
	var _this;
	var timer; //提醒弹窗定时器
	var app = getApp();
	// 引入底部组件
	import popWarn from '../popWarn/popWarn.vue';
	export default {
		name: 'complain',
		props: {
			showPop: {
				type: Boolean,
				default: false
			},
			complainList: {
				type: Array,
				default: ['理由1', '理由2']
			},
			infoDetail: {
				type: Object,
				default: {
					service: 'member',
					template: 'complain',
					module: 'article', //举报模块
					dopost: 'detail',
					aid: -1, //举报id
				}
			}
		},
		components: { //组件注册
			popWarn
		},
		data() {
			return {
				imgPath: app.globalData.imgStaticPath,
				imgVersion: app.globalData.imgVersion,
				// 接口数据
				phoneArea: [],
				// 辅助数据
				activeIndex: 0, //选项下标
				phone: '', //联系电话
				description: '', //举报描述
				areaCode: 86,
				complainb: false,
				complainConb: false,
				phoneb: false,
				phoneConb: false,
				// 组件数据
				warningb: false,
				info: '',
				ajaxb: false
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			warnFn(timeout = 2000) { //弹窗提醒
				_this.warningb = true;
				clearTimeout(timer);
				timer = setTimeout(res => {
					_this.warningb = false;
				}, timeout);
			},
			popFn(state) { //弹窗显隐
				if (state) { //显示
					_this.complainb = true;
					setTimeout(res => {
						_this.complainConb = true
					}, 0);
				} else { //隐藏
					_this.complainConb = false
					setTimeout(res => {
						_this.complainb = false;
					}, 220);
					_this.$emit('hideFn', false); //修改父组件showpop值
				}
			},
			secPopFn(state) { //手机号选择弹窗显隐
				if (state) { //显示
					_this.phoneb = true;
					setTimeout(res => {
						_this.phoneConb = true
					}, 0);
				} else { //隐藏
					_this.phoneConb = false
					setTimeout(res => {
						_this.phoneb = false;
					}, 220);
				}
			},
			phoneAreaData() { //手机号地区获取数据(父组件自己调用)
				if (_this.phoneArea.length == 0) {
					let data = {
						service: 'siteConfig',
						action: 'internationalPhoneSection'
					};
					_this.$ajax.post({
						url: 'include/ajax.php?',
						data: data
					}).then(res => {
						if (res.data.state == 100) {
							_this.phoneArea = res.data.info;
						}
					});
				}
			},
			submitFn() { //提交
				let data = _this.infoDetail;
				data['areaCode'] = _this.areaCode;
				data['type'] = _this.complainList[_this.activeIndex];
				data['desc'] = _this.description;
				data['phone'] = _this.phone;
				if (_this.areaCode == '86') {
					let rule = /^[1-9]\d{10}$/;
					if (rule.test(_this.phone)) { //必填项已填
						if (!_this.ajaxb) {
							_this.ajaxb = true;
							_this.$ajax.post({
								url: app.encodeUrl('include/ajax.php?'),
								data: data
							}).then(res => {
								if (res.data.state == 100) {
									setTimeout(res => {
										_this.popFn(0);
									}, 2200)
								}
								_this.info = res.data.info;
								_this.ajaxb = false;
							})
						}
					} else {
						_this.info = '请检查手机号格式';
					}
				} else if (_this.phone == '') {
					_this.info = '手机号不能为空';
				} else if (!_this.ajaxb) {
					_this.ajaxb = true;
					_this.$ajax.post({
						url: app.encodeUrl('include/ajax.php?'),
						data: data
					}).then(res => {
						if (res.data.state == 100) {
							setTimeout(res => {
								_this.popFn(0);
							}, 2200)
						}
						_this.info = res.data.info;
						_this.ajaxb = false;
					})
				}
			},
		},
		watch: {
			info(newVal, oldVal) {
				if (newVal != '') {
					_this.warnFn();
					setTimeout(res => {
						_this.info = '';
					}, 2200)
				}
			},
			showPop(newVal, oldVal) {
				if (newVal) { //为true才执行
					_this.popFn(1);
				}
			}
		}
	}
</script>

<style>
	@import url('complain.css');
</style>